
import {
    Divider,
    ColorPicker,
    Input,
    InputNumber,
    Select,
} from 'antd'

import { themeStore } from '../Config/zustand'

import { FontFamilyMapping, FontWeightMapping, FontStyleMapping } from '../Config/theme'

const SetSystemLOGO = () => {
    const { logo, updateLogo } = themeStore()
    const { logo: Logo, logoBack, logoSize, logoRadio, logoShadowX, logoShadowY, logoShadowS, logoShadowB } = logo
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = logo
    const { btnBack, btnSize, btnRadio, btnShadowX, btnShadowY, btnShadowS, btnShadowB, icon, iconColo, iconSize } = logo

    const LogoFunc = (key, value) => {
        logo[key] = value
        updateLogo(logo)
    }


    return (
        <div className='SetSystemLOGO'>
            <Divider orientation="left" >Logo</Divider>

            <div className='Content'>
                <div>
                    <div className='title'>Logo图标</div>
                    <div className='Label' >
                        <div>Logo名称</div>
                        <Input value={Logo} onChange={e => LogoFunc('logo', e.target.value)} />
                    </div>
                    <div className='Label'>
                        <div>图标背景</div>
                        <ColorPicker value={logoBack} onChangeComplete={e => LogoFunc('logoBack', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>图标尺寸</div>
                        <InputNumber value={logoSize} onChange={e => LogoFunc('logoSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>图标圆角</div>
                        <InputNumber value={logoRadio} onChange={e => LogoFunc('logoRadio', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={logoShadowX} onChange={e => LogoFunc('logoShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={logoShadowY} onChange={e => LogoFunc('logoShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={logoShadowS} onChange={e => LogoFunc('logoShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={logoShadowB} onChangeComplete={e => LogoFunc('logoShadowB', e.toHexString())} />
                    </div>
                </div>
                <div>
                    <div className='title'>文字标题</div>
                    <div className='Label' >
                        <div>文字内容</div>
                        <Input value={title} onChange={e => LogoFunc('title', e.target.value)} />
                    </div>
                    <div className='Label'>
                        <div>文字颜色</div>
                        <ColorPicker value={fontColor} onChangeComplete={e => LogoFunc('fontColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={fontFamily} options={FontFamilyMapping} onChange={e => LogoFunc('fontFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={fontWeight} options={FontWeightMapping} onChange={e => LogoFunc('fontWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={fontStyle} options={FontStyleMapping} onChange={e => LogoFunc('fontStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={fontSize} onChange={e => LogoFunc('fontSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={fontShadowX} onChange={e => LogoFunc('fontShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={fontShadowY} onChange={e => LogoFunc('fontShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={fontShadowS} onChange={e => LogoFunc('fontShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={fontShadowB} onChangeComplete={e => LogoFunc('fontShadowB', e.toHexString())} />
                    </div>
                </div>
                <div>
                    <div className='title'>折叠按钮</div>
                    <div className='Label' >
                        <div>按钮尺寸</div>
                        <InputNumber value={btnSize} onChange={e => LogoFunc('btnSize', e)} />
                    </div>
                    <div className='Label'>
                        <div>按钮颜色</div>
                        <ColorPicker value={btnBack} onChangeComplete={e => LogoFunc('btnBack', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>按钮圆角</div>
                        <InputNumber value={btnRadio} onChange={e => LogoFunc('btnRadio', e)} />
                    </div>
                    <div className='Label' >
                        <div>按钮X轴</div>
                        <InputNumber value={btnShadowX} onChange={e => LogoFunc('btnShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>按钮Y轴</div>
                        <InputNumber value={btnShadowY} onChange={e => LogoFunc('btnShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>按钮尺寸</div>
                        <InputNumber value={btnShadowS} onChange={e => LogoFunc('btnShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>按钮颜色</div>
                        <ColorPicker value={btnShadowB} onChangeComplete={e => LogoFunc('btnShadowB', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>图标内容</div>
                        <Input value={icon} onChange={e => LogoFunc('icon', e.target.value)} />
                    </div>
                    <div className='Label'>
                        <div>图标颜色</div>
                        <ColorPicker value={iconColo} onChangeComplete={e => LogoFunc('iconColo', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>图标尺寸</div>
                        <InputNumber value={iconSize} onChange={e => LogoFunc('iconSize', e)} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SetSystemLOGO;
